<template>
  <el-form label-width="120px" ref="formRef" :model="form" :rules="formRules">
    <el-row>
      <el-col :span="24">
        <el-form-item label="用户头像" prop="avatar">
          <jcx-image-upload :file-type="['png', 'jpg']" :limit="1" v-model="form.avatar" v-model:file-path="form.avatar"
                            @update:file-path="form.avatar = $event"></jcx-image-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="用户标识" prop="code">
          <el-input disabled clearable placeholder="请输入用户标识" v-model="form.code"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户名称" prop="name">
          <el-input clearable placeholder="请输入用户名称" v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="用户登录名" prop="username">
          <el-input clearable placeholder="请输入用户登录名" v-model="form.username"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户登录密码" prop="password">
          <el-input type="password" clearable placeholder="请输入用户登录密码" v-model="form.password"
                    @change="passwordChange"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="所属部门" prop="deptId">
          <el-input disabled clearable placeholder="请选择所属部门" v-model="form.deptId"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio-button label="0">女</el-radio-button>
            <el-radio-button label="1">男</el-radio-button>
            <el-radio-button label="2">未知</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="联系电话" prop="phone">
          <el-input clearable placeholder="请输入联系电话" v-model="form.phone"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系邮箱" prop="email">
          <el-input clearable placeholder="请输入部门邮箱" v-model="form.email"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="拥有岗位" prop="postIdList">
          <el-input disabled clearable placeholder="请选择所属部门" v-model="form.postIdList"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="拥有角色" prop="roleIdList">
          <el-input disabled clearable placeholder="请选择所属部门" v-model="form.roleIdList"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="是否启用" prop="enabled">
          <el-radio-group disabled v-model="form.enabled">
            <el-radio-button :value="true" border>启用</el-radio-button>
            <el-radio-button :value="false" border>停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序" prop="sort">
          <el-input-number disabled v-model="form.sort" :min="1" controls-position="right" size="large"
                           placeholder="请输入排序"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" clearable placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="js">
import {reactive, ref} from "vue";

const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
})
const formRef = ref();
const formRules = reactive({
  avatar: [{required: true, message: "用户头像为必填项", trigger: "blur"}],
  code: [{required: true, message: "用户标识为必填项", trigger: "blur"}],
  name: [{required: true, message: "用户名称为必填项", trigger: "blur"}],
  username: [{required: true, message: "用户登录名为必填项", trigger: "blur"}],
  password: [{required: true, message: "用户登录密码为必填项", trigger: "blur"}],
  phone: [{required: true, message: "用户联系电话为必填项", trigger: "blur"}],
  email: [{required: true, message: "用户联系邮箱为必填项", trigger: "blur"}],
  deptId: [{required: true, message: "所属部门为必填项", trigger: "blur"}],
  postIdList: [{required: true, message: "岗位列表为必填项", trigger: "blur"}],
  roleIdList: [{required: true, message: "角色列表为必填项", trigger: "blur"}],
  sex: [{required: true, message: "性别为必填项", trigger: "blur"}],
  enabled: [{required: true, message: "是否启用为必填项", trigger: "blur"}],
  sort: [{required: true, message: "排序为必填项", trigger: "blur"}],
});
const getFormRef = () => {
  return formRef.value;
}

const passwordChange = (password) => {
  props.form.passwordChange = true;
}

defineExpose({getFormRef});
</script>
